<template>
    <el-drawer
        :size="size as string"
        :with-header="false"
        class="base-drawer"
        style="--el-drawer-padding-primary: 16px 20px"
        v-bind="$attrs"
        @close="onDrawerClose"
    >
        <header class="base-drawer-header flex justify-between border-b-[1px] border-b-[#E4E7ED] pb-[12px]">
            <div class="pl-[4px] text-[16px] font-[500] text-[#30333A]" v-text="title"></div>
            <div @click="$emit('close')">
                <BaseIcon name="ic_guanbi" />
            </div>
        </header>
        <div class="base-drawer-body pt-[16px]" style="height: calc(100% - 34px)">
            <slot></slot>
        </div>
        <template v-if="$slots.footer" #footer="scopedData">
            <slot name="footer" v-bind="scopedData"></slot>
        </template>
        <template v-else-if="showFooter" #footer>
            <footer class="flex items-center justify-end">
                <template v-if="$slots.footerItems">
                    <slot name="footerItems"></slot>
                </template>
                <template v-else>
                    <el-button v-if="showClose" @click="$emit('close')">{{ closeText }}</el-button>
                    <el-button v-if="showReset" @click="$emit('reset')">{{ resetText }}</el-button>
                    <el-button v-if="showSubmit" :loading="submitLoading" type="primary" @click="onSubmit">
                        {{ submitText }}
                    </el-button>
                </template>
            </footer>
        </template>
    </el-drawer>
</template>

<script lang="ts" setup>
/**
 * @ClassName BaseDrawer
 * @Description 抽屉
 * @Author xuyizhuo
 * @Date 2024/12/20 21:13
 * @example
 */
import { ref } from 'vue'

interface VueProps {
    title: string
    size?: string | number // 抽屉宽度，默认700px
    showFooter?: boolean // 是否显示底部，默认显示
    showClose?: boolean // 是否显示取消按钮，默认显示
    showReset?: boolean // 是否显示重置按钮，默认不显示
    showSubmit?: boolean // 是否显示确认按钮，默认显示
    closeText?: string // 关闭按钮的文字
    resetText?: string // 重置按钮的文字
    submitText?: string // 提交按钮的文字
}

withDefaults(defineProps<VueProps>(), {
    title: '',
    size: '800px',
    showFooter: true,
    showClose: true,
    showReset: false,
    showSubmit: true,
    closeText: '关闭',
    resetText: '重置',
    submitText: '保存',
})
const emits = defineEmits(['close', 'reset', 'submit'])

// 提交按钮的状态
const submitLoading = ref(false)

const onSubmit = () => {
    if (submitLoading.value) {
        return
    }
    submitLoading.value = true
    emits('submit', () => {
        submitLoading.value = false
    })
}

const onDrawerClose = () => {
    submitLoading.value = false
}
</script>

<style lang="scss" scoped></style>
